<template>
    <div>
        <el-table
            :data="disCounts"
            style="width: 100%">
                <el-table-column
                        prop="name"
                        label="名称"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="discount"
                        label="折扣"
                        width="80">
                </el-table-column>
                <el-table-column label="满减" width="150">
                    <template slot-scope="scope">
                        满 {{ scope.row.originCondition }} 减 {{ scope.row.denominations }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="startTime"
                        label="开始时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="endTime"
                        label="结束时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="描述">
                </el-table-column>
                <el-table-column label="满减" width="200">
                    <template slot-scope="scope">
<!--                        <el-button type="primary" plain size="mini" @click="updateCounts(scope.row)">修改</el-button>-->
                        <el-button type="danger" plain size="mini" @click="deleteCounts(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <el-divider/>

        <el-button @click="insert" type="success" v-if="flag" size="mini" plain>添加</el-button>

<!--        <el-form :inline="true" :model="disCountsForm"  ref="disCountsForm" label-width="80px" class="demo-dynamic">-->
<!--            <el-form-item label="优惠名称">-->
<!--                <el-input v-model="disCountsForm.name"/>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="优惠描述">-->
<!--                <el-input v-model="disCountsForm.description"/>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="普通优惠金额">-->
<!--                <el-input v-model="disCountsForm.value"/>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="满：">-->
<!--                <el-input v-model="disCountsForm.originCondition"/>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="减：">-->
<!--                <el-input v-model="disCountsForm.denominations"/>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="折扣">-->
<!--                <el-input v-model="disCountsForm.fracture"/>-->
<!--            </el-form-item>-->
<!--            <el-form-item  label="优惠区间">-->
<!--                <div class="block">-->
<!--                    <el-date-picker-->
<!--                            v-model="disCountsForm.startTime"-->
<!--                            type="date"-->
<!--                            placeholder="开始日期">-->
<!--                    </el-date-picker> - -->
<!--                    <el-date-picker-->
<!--                            v-model="disCountsForm.endTime"-->
<!--                            type="date"-->
<!--                            placeholder="结束日期">-->
<!--                    </el-date-picker>-->
<!--                </div>-->
<!--            </el-form-item>-->
<!--            <el-form-item  label="优惠区间">-->
<!--                <el-button @click="updateOk" type="primary" v-if="!flag" size="mini" plain>修改</el-button>-->
<!--                <el-button @click="insert" type="success" v-if="flag" size="mini" plain>添加</el-button>-->
<!--            </el-form-item>-->
<!--        </el-form>-->
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "disCountsShopId",
        props: ['shopId'],
        data() {
            return {
                disCounts:[],
                disCountsForm:{},
                flag :true,
            };
        },

        created() {
            this.getByHome();
        },
        watch: {
            // 监听数据变化
            shopId: {
                handler: function(o,u) {
                    //这时候 o = 岑先生、u = 不认识
                    console.log('数据更新', o, u)
                    this.getByHome();
                },
                deep: true
            }
        },
        methods: {
            getByHome(){
                this.$http.get(`coupon/api/shop/${this.shopId}`).then(resp =>{
                    this.disCounts = resp.data.data;
                    console.log(this.disCounts)
                })
            },
            insert() {
                this.$router.push({path:'/coupon'})
            },
            deleteCounts(id){
                var idList = [id]
                this.$http.delete("/coupon/api",{data: idList}).then((response) => {
                    // 提示信息
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    // 刷新页面
                    this.getByHome();
                })
            },
            updateCounts(row){
                this.flag = false;
                this.disCountsForm = row;
            },
            updateOk(){
                this.$http.put('/counts',this.disCountsForm).then(resp =>{
                    if (resp.data.code === 200){
                        this.$message({
                            type:'success',
                            message:'修改成功！'
                        })
                        this.getByHome();
                        this.disCountsForm = {}
                        this.flag = true;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
